<template>
  <div class="one-good">
    <div v-for="(item, index) in allList" :key="index" class="one-content">
      <div class="one-name">
        <div class="one-book">
          <span>{{ item.itemName }}</span>/
          <span>{{ item.number }}</span>
        </div>
        <div class="one-btn">
          <div v-if="item.status===1" class="used">
            已用
          </div>
          <div v-if="item.status===2" class="unused">
            未用
          </div>
          <div v-if="item.status===3" class="main">
            维修
          </div>
        </div>
        <div class="one-icon">
          <van-icon name="edit" @click="viewDetail(item)" />
        </div>
      </div>
      <div class="one-time">
        <div>{{ item.purchaseDate | formatDate(item.purchaseDate) }}</div>｜
        <div>{{ item.status === 1?'已用': item.status === 2?"未用":"维修" }}</div>
      </div>
      <div class="one-man">
        <div>受用人</div>
        <div>{{ item.recipient === null? '暂无':item.recipient }}</div>
      </div>
      <div class="one-model">
        <div>型号</div>
        <div>{{ item.model }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 日期格式化
  filters: {
    formatDate(value) {
      const dt = new Date(value)
      const year = dt.getFullYear()
      const month = dt.getMonth() + 1
      const date = dt.getDate()
      return `${year}-${month}-${date}`
    },
  },
  props: {
    allList: {
      type: Array,
    },
  },
  data() {
    return {
      active: 0,
      option: {},
    }
  },
  mounted() {
  },
  methods: {
    viewDetail(view) {
      uni.navigateTo({
        url: `/pages/office/goods-materials/good-details/index?id=${view.id}`,
      })
      console.log(view, 'eeeeeeeeeee')
    },
  },
}
</script>
<style lang="scss" scoped>
.one-good{
  margin-top: 15px;
  width:100%;
  .one-content{
    width: 93%;
    height:116px;
    margin:0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    margin-bottom: 10px;
    padding:10px 0px;
    .one-name{
      display: flex;
      padding:0px 10px;
      margin: 7px 0px;
      .one-book{
        color:#333;
        font-size: 16px;
        font-weight:600;
        width: 40%;
      }
      .one-btn{
        width: 20%;
        div{
          width: 36px;
          text-align: center;
          border-radius: 2px;
        }
        .used{
          border: 1px solid #00D91A;
          background: #e5fbe8;
          color: #00D91A;
        }
        .unused{
          border: 1px solid #E4A100;
          background: #fcf5e5;
          color: #E4A100;
        }
        .main{
          border: 1px solid #FF0000;
          background: #ffe5e5;
          color: #FF0000;
        }
      }
      .one-icon{
        width: 40%;
        text-align: right;
        color:#739ECA;
      }
    }
    .one-time{
      display: flex;
      padding:0px 10px;
      margin: 7px 0px;
    }
    .one-man,.one-model{
      display: flex;
      justify-content: space-between;
      color:#333;
      font-size: 14px;
      padding:0px 10px;
      margin: 7px 0px;
    }
  }
}
</style>
